import React, { useState } from 'react';
import styles from './index.less';
import { Form, Input, Button, Select, Upload, message, InputNumber, Breadcrumb } from 'antd';
const { Option } = Select;
import { UploadOutlined } from '@ant-design/icons';
import type { UploadChangeParam, UploadFile } from 'antd/lib/upload/interface';
import { createAppeal } from '@/services/GovernmentTrain/GovernmentTrain';
import { getToken } from '@/utils/storage';
import { history } from '@@/core/history';
import { appealCategory, appealType } from '@/utils/trainUtil';
import { getUserInfo } from '@/utils/storage';

const FormLayoutDemo = () => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const onFinish = (values: any) => {
    const {
      appealPersonName,
      appealPersonContact,
      appealType,
      appealCategory,
      appealTitle,
      appealContent,
    } = values;
    fileList?.forEach((item: any) => {
      item.fileName = item.name;
      item.fileUrl = item.response.results;
    });
    createAppeal({
      appealPersonName,
      appealPersonContact,
      appealType,
      appealCategory,
      appealTitle,
      appealContent,
      annexList: fileList,
    })
      .then((resp) => {
        if (resp.errorCode === 0) {
          message.success('提交成功');
          history.push({ pathname: '/' });
        }
      })
      .catch((error) => {
        message.error('提交失败，请重试');
      });
  };
  const handleFileChange = (file: UploadChangeParam) => {
    if (file.file.status === 'done') {
      setFileList(file.fileList);
    }
    if (fileList.length === 5) {
      message.warning('最多可上传5个附件');
    }
  };

  return (
    <>
      <Form name="basic" layout="vertical" form={form} onFinish={onFinish}>
        <Form.Item
          label="诉求人:"
          name="appealPersonName"
          initialValue={getUserInfo().companyName}
          rules={[{ required: true, message: '请输入诉求人姓名' }]}
        >
          <Input placeholder="请输入诉求人姓名（10字以内）" disabled={true} />
        </Form.Item>
        <Form.Item
          label="诉求人联系方式:"
          name="appealPersonContact"
          initialValue={getUserInfo().phone}
          rules={[{ required: true, message: '请输入诉求人联系方式' }]}
        >
          <Input placeholder="请输入诉求人联系方式（建议手机号）" type="number" disabled={true} />
        </Form.Item>
        <Form.Item
          label="诉求类型:"
          name="appealType"
          initialValue="01"
          rules={[{ required: true, message: '请选择诉求类型' }]}
        >
          <Select defaultValue="01">
            {appealType?.map((item) => {
              return (
                <Option key={item.key} value={item.value}>
                  {item.title}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="诉求类别:"
          name="appealCategory"
          initialValue="01"
          rules={[{ required: true, message: '请选择诉求类别' }]}
        >
          <Select defaultValue="01">
            {appealCategory?.map((item) => {
              return (
                <Option key={item.key} value={item.value}>
                  {item.title}
                </Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          label="诉求标题:"
          name="appealTitle"
          rules={[{ required: true, message: '请输入诉求标题' }]}
        >
          <Input placeholder="请输入诉求标题（15字以内）" maxLength={15} />
        </Form.Item>
        <Form.Item
          label="诉求内容:"
          name="appealContent"
          rules={[{ required: true, message: '请输入诉求内容' }]}
        >
          <Input.TextArea
            placeholder="请详细描述诉求具体内容（200字以内）"
            showCount
            maxLength={200}
          />
        </Form.Item>
        <Form.Item label="上传附件:" name="file">
          <Upload
            headers={{
              'Access-Token': getToken() || '',
            }}
            onChange={handleFileChange}
            maxCount={5}
            accept={'.pdf,.doc,.docx,.img,.png'}
            name="file"
            action={`${WEB_DOMAIN.apiDomain}/files/uploadFile`}
          >
            <Button icon={<UploadOutlined />}>上传附件</Button>
            <div className={styles.uploadTips}>最多可上传5个</div>
          </Upload>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 12, span: 20 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

const AppealSubmission: React.FC = () => {
  return (
    <div className={styles.contentBack}>
      <div className={styles.contentMiddle}>
        <div style={{ margin: '15px 0' }}>
          <div className={styles.breadcrumb}>
            <Breadcrumb separator="">
              <Breadcrumb.Item>您的位置</Breadcrumb.Item>
              <Breadcrumb.Separator>:</Breadcrumb.Separator>
              <Breadcrumb.Item href="">首页</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="">政企直通车</Breadcrumb.Item>
              <Breadcrumb.Separator />
              <Breadcrumb.Item href="">提交诉求</Breadcrumb.Item>
            </Breadcrumb>
          </div>
        </div>
        <div className={styles.AppealCenter}>
          <FormLayoutDemo />
        </div>
      </div>
    </div>
  );
};

export default AppealSubmission;
